<template>
  <div
    class='layout-login'
    @keyup='enterSubmit'
  >
    <el-form
      ref='ruleForm'
      label-position='right'
      label-width='80px'
      :model='form'
      :rules='rules'
    >
      <el-form-item
        label='用户名'
        prop='name'
      >
        <el-input v-model='form.name'/>
      </el-form-item>
      <el-form-item
        label='密码'
        prop='pwd'
      >
        <el-input
          v-model='form.pwd'
          type='password'
          autocomplete='off'
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type='primary'
          @click='onSubmit'
        >
          登录
        </el-button>
        <el-button @click='resetFields(ruleForm)'>
          重置
        </el-button>
      </el-form-item>
      <el-form-item>
        <p class='leading-5'>
          账号: admin 密码: admin
        </p>
        <p class='leading-5'>
          账号: dev 密码: dev
        </p>
        <p class='leading-5'>
          账号: test 密码: test
        </p>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, ref} from 'vue'
import {ElNotification} from 'element-plus'
import {validate, resetFields} from '@/utils/formExtend'
import {useStore} from 'vuex'
import {useRouter, useRoute} from "vue-router";

export default defineComponent({
  name: 'Login',
  setup() {
    let form = reactive({
      name: 'admin',
      pwd: 'admin'
    })
    const ruleForm = ref(null)
    const enterSubmit = (e: KeyboardEvent) => {
      if (e.key === 'Enter') {
        onSubmit()
      }
    }

    function getOtherQuery(query:any):any {
      return Object.keys(query).reduce((acc:any, cur:string) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }

    const router = useRouter();
    const route = useRoute();
    const store = useStore()
    const redirect = route.query && route.query.redirect ? route.query.redirect : '/'
    const otherQuery = route.query ? getOtherQuery(route.query) : []
    // console.log(store.getters)
    // console.log(redirect)
    // console.log(otherQuery)
    const onSubmit = async () => {
      let {name, pwd} = form
      if (!await validate(ruleForm)) return
      await store.dispatch('layout/login', {username: name, password: pwd})
        .then((data) => {
          if(200 == data.code){
            ElNotification({
              title: '欢迎',
              message: '欢迎回来',
              type: 'success'
            })
            router.push({path: redirect, query: otherQuery})
            // this.loading = false
          }else{
            ElNotification({
              message: data.message,
              type: 'error'
            })
          }
        })
        .catch((error) => {
          // this.loading = false
          ElNotification({
            message: error.data.message,
            type: 'error'
          })
        })

    }
    const rules = reactive({
      name: [
        {
          validator: (rule: any, value: any, callback: (arg0?: Error | undefined) => void) => {
            if (!value) {
              return callback(new Error('用户名不能为空'))
            }
            callback()
          }, trigger: 'blur'
        }
      ],
      pwd: [
        {
          validator: (rule: any, value: any, callback: (arg0?: Error | undefined) => void) => {
            if (!value) {
              return callback(new Error('密码不能为空'))
            }
            callback()
          }, trigger: 'blur'
        }
      ]
    })
    return {
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      form,
      onSubmit,
      enterSubmit,
      rules,
      resetFields,
      ruleForm
    }
  }
})
</script>

<style scoped>
.layout-login {
  padding-top: 200px;
  width: 400px;
  margin: 0 auto;
}
</style>
